<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        .right {
            width: 48%;
            float: right;
        }

        .left {
            width: 48%;
            float: left;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
    </style>
</head>

<body>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend id="yingyuan">
            <button data-target="" class="layui-btn layui-btn-sm" id="back">返回</button>
            <span id="spanTitle"></span>
        </legend>
    </fieldset>

    <div class="left layui-inline">
        <h2 style="text-align:center; margin: 15px 0; color:#1E9FFF">当前院线已上映电影表</h2>
        <table id="left-table"></table>

    </div>
    <div class="right  layui-inline">
        <h2 style="text-align:center; margin: 15px 0; color:#FF5722">当前院线未上映电影表</h2>

        <table id="right-table" lay-filter="test"></table>

    </div>
    <!-- <script src="../../js/lodash.min"></script> -->
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script type="text/html" id="toolbarDemoLeft"></script>

    <script>

        //获取地址栏参数
        function query(url) {
            const parst = url.split("?");
            if (parst.length == 1) {
                return {};
            }
            const obj = {};
            parst[1].split("&").map(item => item.split("=")).forEach(([p, v]) => {
                obj[p] = decodeURIComponent(v);
            })
            return obj;
        }
        const cinemaObj = query(location.href);
        let cinemaId = cinemaObj.id;
        let table;
        layui.use('table', function () {
            table = layui.table;
            //已上映
            table.render({
                elem: '#left-table'
                , url: '/api/MovieAndCinema/' + cinemaId //数据接口
                , toolbar: "#left-table"
                , page: true//开启分页
                , parseData: function (res) { //res 即为原始返回的数据
                    // console.log(res);
                }
                , cols: [
                    [
                        {
                            title: ' 名称'
                            , templet: `<div>{{d.movie.name}}</div>`

                        },
                        {
                            title: '类型'
                            , templet: `<div>{{d.movie.type}}</div>`
                        },
                        {
                            title: '时长'
                            , templet: `<div>{{d.movie.time}}</div>`
                        },
                        {
                            title: '评分'
                            , templet: `<div>{{d.movie.score}}</div>`
                        },
                        {
                            title: '操作',
                            templet: `<div class="layui-btn-container">
                                        <button class="layui-btn layui-btn-sm" onclick="Addsession('{{d.movie._id}}','{{d.movie.name}}' ,'{{d.screens.length}}','{{d._id}}',this)">
                                            <span id="movieCount">
                                                {{d.screens.length}}
                                            </span>个场次
                                        </button> 
                                        <button class="layui-btn layui-btn-sm layui-btn-danger" onclick="delMovie('{{d.movie._id}}', this)">
                                            下映
                                        </button>
                                    </div>`,
                            width: "28%",
                        }
                    ]
                ]
            });

            //未上映
            table.render({
                elem: '#right-table'
                , url: '/api/MovieAndCinema/unshow/' + cinemaId  //数据接口
                , page: true //开启分页
                , toolbar: "#right-table"
                , toolbar: "#id"
                , cols: [
                    [
                        {
                            field: 'name',
                            title: '名称'
                        },
                        {
                            field: 'type',
                            title: '  类型'
                        },
                        {
                            field: 'time',
                            title: '时长'
                        },
                        {
                            field: 'score',
                            title: '评分'
                        },
                        {
                            title: "操作",
                            templet: '<div class="layui-btn-container"><button class="layui-btn layui-btn-sm layui-btn-normal" onclick="Release(`{{d._id}}`,this)">上映<tton></div>',

                        }
                    ]
                ]
            });
        });
        //查询
        function chaxun(key) {
            layui.table.reload(`right-table`, {
                where: {
                    key,
                    page: 1,
                },
                page: {
                    curr: 1  //重新设置第一页
                }
            });
        }
        //返回`oiuy=
        let back = document.getElementById("back");
        back.onclick = function () {
            location.href = "../../pages/cinemaManagement.html";
        }
        //下映
        function delMovie(id, btn) {
            layer.confirm('确定下映吗？', function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema/" + id,   //该电影的id
                    method: "delete",
                    success: function () {
                        $(btn).parents("tr").remove();
                        layer.close(index);
                        location.href = "./movieAndCiname.html?id=" + cinemaId;
                    }
                });
                // $(btn).parents("tr").remove();
                // layer.close(index);
            });
        }
        //上映
        function Release(id, btn) {
            let data = {
                movieid: id,
                cinemaid: cinemaId
            }
            layer.confirm('确定上映电影', {
                icon: 0,
                title: '提示'
            }, function (index) {
                $.ajax({
                    url: "/api/MovieAndCinema",
                    method: "post",
                    data,
                    success: function () {
                        $(btn).parents("tr").remove();
                        layer.close(index);
                        location.href = "./movieAndCiname.html?id=" + cinemaId;
                    }
                });
            });
        }
        // id电影id name 电影名字 screens 电影场次数 mid 电影对象id 
        function Addsession(id, name, screens, mid, btn) {
            layer.open({
                title: ['电影：' + name, 'font-size:18px;color:rgba(240,2,2,.8)'],
                type: 2,
                content: './addsession.html?' + "id=" + id + "&cid=" + cinemaId + "&mid=" + mid,
                area: ['800px', '450px'],
                end: function () {
                    location.href = "./movieAndCiname.html?id=" + cinemaId;
                }
            });
        }
        async function cine() {
            const c = await $.getJSON("/api/Cinema/" + cinemaId);
            // console.log(c);

            $("#spanTitle").text(c.name);
        }
        cine()
    </script>
    <script type="text/html" id="id">
    <div class="layui-inline">
        <div class="layui-input-inline">
            <input type="tel" id="txtKey" placeholder="请输入关键字" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-inline">
            <button class="layui-btn layui-btn-sm" lay-submit   onclick="chaxun($('#txtKey').val())">查询</button>
        </div>
    </div>
</script>

</body>

</html>